<template>
  <el-main>
    <el-form
      :model="month_salary"
      label-width="80px"
      :rules="rules"
      style="margin-top:30px;width:270px"
      v-loading="loading"
      ref="month_salary"
    >
      <el-form-item label="工号" prop="number">
        <el-input style="width: 180px;margin-left:35px" v-model="month_salary.number"></el-input>
      </el-form-item>
      <el-form-item label="年份" prop="year">
        <el-input style="width: 120px" v-model.number="month_salary.year"></el-input>
      </el-form-item>
      <el-form-item label="月份" prop="month">
        <el-input-number v-model="month_salary.month" :min="1" :max="12" style="width: 120px"></el-input-number>
      </el-form-item>
      <el-form-item label="底薪" prop="basicSalary">
        <el-input style="width: 120px" v-model="month_salary.basicSalary"></el-input>
      </el-form-item>
      <el-form-item label="提成" prop="percentage">
        <el-input style="width: 120px" v-model="month_salary.percentage"></el-input>
      </el-form-item>
      <el-form-item label="补助" prop="subsidy">
        <el-input style="width: 120px" v-model="month_salary.subsidy"></el-input>
      </el-form-item>
      <el-form-item style="width: 300px">
        <el-button type="primary" @click="submitForm('month_salary')">立即添加</el-button>
        <el-button @click="resetForm('month_salary')" style="margin-left:50px">重置</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>
import { postRequestByParams } from "../utils/api";

export default {
  data() {
    return {
      loading: false,
      month_salary: {
        number: "",
        year: "",
        month: "",
        basicSalary: "",
        percentage: "",
        subsidy: ""
      },
      rules: {
        number: [
          { required: true, message: "工号不能为空" },
          { pattern: /^\d/, message: "必须为数字值" },
          { min: 12, max: 12, message: "长度为12个字符", trigger: "blur" }
        ],
        year: [
          { required: true, message: "年份不能为空" },
          { type: "number", message: "必须为数字值" }
        ],
        month: [
          { required: true, message: "月份不能为空" },
          { type: "number", message: "必须为数字值" }
        ],
        basicSalary: [
          { required: true, message: "底薪不能为空" },
          { pattern: /^\d+(\.\d+)?$/, message: "必须为数字值" }
        ],
        percentage: [
          { required: true, message: "提成不能为空" },
          { pattern: /^\d+(\.\d+)?$/, message: "必须为数字值" }
        ],
        subsidy: [
          { required: true, message: "补助不能为空" },
          { pattern: /^\d+(\.\d+)?$/, message: "必须为数字值" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          var _this = this;
          postRequestByParams("/salary/add-employee-salary", {
            number: _this.month_salary.number,
            year: _this.month_salary.year,
            month: _this.month_salary.month,
            basicSalary: _this.month_salary.basicSalary,
            percentage: _this.month_salary.percentage,
            subsidy: _this.month_salary.subsidy
          }).then(resp => {
            _this.loading = false;
            if (resp.status == 200) {
              var json = resp.data;
              this.$alert(json.data);
            } else {
              this.$alert("未知错误！");
            }
            _this.resetForm("month_salary");
          });
        } else {
          this.$alert("输入错误！");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style>
</style>